<template>
	<view class="continer flex-column flex-center">
		<nut-form>
			<nut-form-item label="账号">
				<nut-input v-model="formData.username" class="nut-input-text" placeholder="请输入账号" type="text" />
			</nut-form-item>
			<nut-form-item label="密码">
				<nut-input v-model="formData.password" class="nut-input-text" placeholder="请输入密码" type="text" />
			</nut-form-item>
			<!-- <nut-form-item class="yzm-item" label="图形验证码">
				<nut-input v-model="formData.yzm" class="nut-input-text" placeholder="请输入图形验证码" type="text" />
				<image @tap="changeYzm" class="yzm" :src="yzmpic"></image>
			</nut-form-item> -->
			<nut-button @tap="submit" class="log-btn" block type="primary">登陆</nut-button>
		</nut-form>
	</view>
</template>

<script setup>
	import {
		reactive,
	} from "vue";
	import useUserState from '@/stores/user.js'
	const {
		doLogin
	} = useUserState()


	const formData = reactive({
		username: '',
		// yzm: '',
		// yzmc: '',
		password: ''
	})

	// const changeYzm = () => {
	// 	formData.yzmc = guid()
	// 	yzmpic.value = '/monitor/api/common/yzm?' + formData.yzmc
	// }

	// changeYzm()

	// function guid() {
	// 	return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
	// 		var r = Math.random() * 16 | 0,
	// 			v = c == 'x' ? r : (r & 0x3 | 0x8);
	// 		return v.toString(16);
	// 	});
	// }

	const submit = () => {
		doLogin(formData);
	}
</script>

<style lang="scss" scoped>
	:deep(.nut-form) {
		border-radius: 24rpx;
		background-color: #fff;
		width: 100%;
	}

	.log-btn {
		width: calc(100% - 64rpx);
		margin: 32rpx 32rpx 20rpx;
	}

	:deep(.nut-form-item) {
		position: relative;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.yzm {
		width: 200rpx;
		height: 50rpx;
		background-color: #ccc;
		position: absolute;
		right: 32rpx;
		bottom: 25rpx;
	}
</style>